<template>
	<view>
		<view class="tabbarHade">
			<img src="/static/images/user.png" alt="" />
			<view class="">
				我的
			</view>
		</view>
		<view class="int">
			<view class="left">
				<img src="https://resource.tuniaokj.com/images/skit/video-4.jpg" alt="" />
				<view class="">
					<text>游客</text>
					<view>ID:24028686 <text> <image src="/static/images/link.png" mode=""></image> </text> </view>
				</view>
			</view>
			<view class="right">
				<img src="/static/images/edit.png" alt="" />
			</view>
		</view>
		<view class="compony">
			<text>华东地区芯片制造厂</text>
			<text>青岛百杉集团有限公司</text>
		</view>
		<view class="list">
			<view class="item">
				<view class="left">
					<img src="/static/images/message.png" alt="" />
					<text>常见问题</text>
				</view>
				<view class="right">
					<img src="/static/images/right.png" alt="" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<img src="/static/images/kf.png" alt="" />
					<text>在线客服</text>
				</view>
				<view class="right">
					<img src="/static/images/right.png" alt="" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<img src="/static/images/kf.png" alt="" />
					<text>问题反馈</text>
				</view>
				<view class="right">
					<img src="/static/images/right.png" alt="" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<img src="/static/images/kf.png" alt="" />
					<text>技术热线</text>
				</view>
				<view class="right">
					134****5273
				</view>
			</view>
		</view>
		<view class="out">
			<text> <image src="/static/images/log out.png" mode=""></image> </text>
			<text>退出登录</text>
			
		</view>
		<view class="copyright">
			<text>百杉集团</text>
			<text>提供技术支持</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.tabbarHade {
		background-color: #5479FF;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fff;
		padding-left: 40rpx;
		img {
			width: 100rpx;
		}
	}
	.int {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 90%;
		box-sizing: border-box;
		margin: auto;
		margin-top: 20rpx;
		.left {
			display: flex;
			flex-direction: row;
			align-items: center;
			img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			view {
				display: flex;
				flex-direction: column;
				text:nth-child(1){
					font-weight: bold;
				}
				view{
					display: flex;
					flex-direction: row;
				
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
		.right{
			display: flex;
			align-items: center;
			img{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.compony{
		margin: auto;
		margin-top: 20rpx;
		border-radius: 20rpx;
		width: 90%;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		background: linear-gradient(45deg, #84C3FF, #58ABFF, #B5B4FF);
		box-shadow: 0px 0px 12px #b5b5b5; box-shadow:0px 0px 12px #b1b1b1;
		box-sizing: border-box;
		text:nth-child(1){
			color: #d89000;
			font-weight: bold;
		}
		text:nth-child(2){
			color: #fff;
			font-weight: bold;
		}
	}
	.list{
		box-shadow: 0px 0px 12px #b5b5b5; 
		width: 90%;
		margin: auto;
		margin-top: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20rpx;
			.left{
				img{
					width: 40rpx;
					vertical-align: middle;
				}
			}
			.right{
				img{
					width: 40rpx;
				}
			}
		}
	}
	.out{
		width: 90%;
		margin: auto;
		margin-top: 20rpx;
		box-shadow: 0px 0px 12px #b5b5b5; 
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.copyright{
		padding: 20rpx;
		margin: auto;
		width: 90%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		text:nth-child(1){
			color: #5479FF;
		}
	}
</style>